<template>
	<view>
		<image src="../../../客服微信.jpg"></image>
	</view>
</template>

<script>
	import city from '@/utils/area';
	import config from '@/common/config';
	import {isEmpty} from '@/utils/utils';
	import {register} from '@/common/http.api';
	export default {
		data() {
			return {
				showAreaItem:false,
				showSex: false,
				showBirthday: false,
				showArea:false,
				minDate: -1262332800,
				currentDate:new Date().getTime(),
				birthday: Number(new Date()),
				defaultAddress: [],
				addressColumns: [],
				addressData:[],
				actions: [{
						name: '',
					},
					{
						name: '',
					},
				],
				form:{
					 nickname:'',
					 password:'',
					 mobile:'',
					 code:'',
					 sex:'',
					 birthday:'',
					 area:'',
					 avatar:'',
				},
				fileList: [],
				uploadavatarText:'',
				nicknameText:'',
				fillnicknameText:'',
				genderText:'',
				birthdayText:'',
				areaText:'',
				confirmsubmissionText:'',
				improvelaterText:'',
				mobilebeemptyText:'',
				passwordbeemptyText:'',
				captchabeemptyText:'',
				pleasesigninText:'',
				registrationfailedText:'',
				nicknamebeemptyText:'',
				genderbeemptyText:'',
				areabeemptyText:'',
				birthdaybeementText:'',
				perfectText:'',
				maleText:'',
				femaleText:'',
				uploadloadingText:'',
				chooseText:'',
				cancelText:'',
				confirmText:'',
				locale:'',
			};
		},
		onLoad(e){
			this.form.password=e.password;
			this.form.mobile=e.mobile;
			this.form.code=e.code;
			this.handleArea();
		},
		onShow(){
			this.refresh();
			this.locale = this.$i18n.locale;
			if(this.locale === 'zh-Hans'){
				this.showAreaItem = true;
			}
		},
		methods:{
			refresh(){
				this.uploadavatarText = this.$t('complete.uploadavatar.text');
				this.nicknameText = this.$t('complete.nickname.text');
				this.fillnicknameText = this.$t('complete.fillnickname.text');
				this.genderText = this.$t('complete.gender.text');
				this.birthdayText = this.$t('complete.birthday.text');
				this.areaText = this.$t('complete.area.text');
				this.confirmsubmissionText = this.$t('complete.confirmsubmission.text');
				this.improvelaterText = this.$t('complete.improvelater.text');
				this.mobilebeemptyText = this.$t('complete.mobilebeempty.text');
				this.passwordbeemptyText = this.$t('complete.passwordbeempty.text');
				this.captchabeemptyText = this.$t('complete.captchabeempty.text');
				this.pleasesigninText = this.$t('complete.pleasesignin.text');
				this.registrationfailedText = this.$t('complete.registrationfailed.text');
				this.nicknamebeemptyText = this.$t('complete.nicknamebeempty.text');
				this.genderbeemptyText = this.$t('complete.genderbeempty.text');
				this.areabeemptyText = this.$t('complete.areabeement.text');
				this.birthdaybeementText = this.$t('complete.birthdaybeement.text');
				this.perfectText = this.$t('complete.perfect.text');
				
				this.actions[0].name = this.$t('common.male.text');
				this.actions[1].name = this.$t('common.female.text');
				this.cancelText = this.$t('common.cancel.text');
				this.confirmText = this.$t('common.sure.text');
				
				this.uploadloadingText = this.$t('common.uploadloading.text');
				this.chooseText = this.$t('common.choose.text');
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let that = this;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: that.uploadloadingText
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let json = JSON.parse(result);
					if(json.code === 0){
						this.form.avatar = json.data;
						let item = this.fileList[fileListLen]
						this.fileList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: json.data
						}))
						fileListLen++
					}
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + '/app/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							"tenant-id": config.tenantId //token校验
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						},
						complete: (res)=>{
							let json = JSON.parse(res.data);
							if(json.code != 0){
								this.fileList.splice(this.fileList.length-1, 1)
								this.$refs.uToast.show({
									message: json.msg,
									type: 'error',
								})
							}
						}
					});
				})
			},
			handleArea(){
				let {
					provinceData,
						cityData,
						areaData
					} = city;
				let arr=[];
				let province=[];
				let arr1=[];
				let arr2=[];
				provinceData.forEach((item, index) => {
					arr.push({
						...item,
						children: []
					});
					arr[index].children.push(...cityData[index]);
					arr[index].children.forEach((item1, index1) => {
						item1['children'] = [];
						item1.children.push(...areaData[index][index1]);
						
					});
				});
				province=arr.map(e=>{return e.label});
				arr1=arr[0].children.map(e=>{return e.label});
				arr2=arr[0].children[0].children.map(e=>{return e.label});
				this.addressColumns=[province,arr1,arr2]
				this.addressData=arr;
			},
			changeHandler(e) {
				const {
						columnIndex,
						value,
						values, // values为当前变化列的数组内容
						index,
						indexs,
						// 微信小程序无法将picker实例传出来，只能通过ref操作
						picker = this.$refs.uPicker
					} = e
					// 当第一列值发生变化时，变化第二列(后一列)对应的选项
					if (columnIndex === 0) {
						// picker为选择器this实例，变化第二列对应的选项
						let children1=this.addressData[index].children.map(e=>{return e.label})
						picker.setColumnValues(1, children1)
						// console.log(this.addressData[index].children[indexs[1]].children)
						let children2=this.addressData[index].children[indexs[1]].children.map(e=>{return e.label})
						picker.setColumnValues(2, children2)
					}
					if (columnIndex === 1) {
						// console.log("index",index,"indexs",indexs)
						let children3=this.addressData[indexs[0]].children[indexs[1]].children.map(e=>{return e.label})
						picker.setColumnValues(2, children3)
					}
			},
			addressConfirm(e) {
				this.showArea=false;
				this.form.area=`${e.value[0]}-${e.value[1]}-${e.value[2]}`
			},
			birthdayClose() {
				this.showBirthday = false
			},
			birthdayConfirm(e) {
				this.showBirthday = false
				this.form.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
			},
			sexSelect(e) {
				this.form.sex = e.name
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			skip(){
				let that = this;
				if(isEmpty(this.form.mobile)){
					this.$refs.uToast.show({
						message: that.mobilebeemptyText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.password)){
					this.$refs.uToast.show({
						message: that.passwordbeemptyText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.code)){
					this.$refs.uToast.show({
						message: that.captchabeemptyText,
						type: 'error',
					})
					return;
				}
				register({
					mobile: this.form.mobile,
					password: this.form.password,
					code: this.form.code,
					area: this.form.area,
					birthday: this.form.birthday,
					nickname: this.form.nickname,
					sex: this.form.sex,
					avatar: this.form.avatar,
					skip:true,
					locale:this.locale,
					source:'APP',
				})
				.then(res => {
					if (res.code === 0) {
						this.sending = true;
						this.$refs.uToast.show({
							message: that.captchabeemptyText,
							type: 'success'
						})
						uni.hideLoading();
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/common/public/login_one'
							});
						}, 1000);
					} else {
						uni.hideLoading();
						uni.showModal({
							showCancel: false,
							title: that.registrationfailedText,
							content: res.msg,
						});
					}
				});
			},
			confirm(){
				let that = this;
				if(isEmpty(this.form.mobile)){
					this.$refs.uToast.show({
						message: that.mobilebeemptyText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.password)){
					this.$refs.uToast.show({
						message: that.passwordbeemptyText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.code)){
					this.$refs.uToast.show({
						message: that.captchabeemptyText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.nickname)){
					this.$refs.uToast.show({
						message: that.nicknamebeemptyText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.sex)){
					this.$refs.uToast.show({
						message: that.genderbeemptyText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.birthday)){
					this.$refs.uToast.show({
						message: that.birthdaybeementText,
						type: 'error',
					})
					return;
				}
				if(this.showAreaItem){
					if(isEmpty(this.form.area)){
						this.$refs.uToast.show({
							message: that.areabeemptyText,
							type: 'error',
						})
						return;
					}
				}
				this.$refs.uToast.show({
					message: that.perfectText,
					type: 'loading',
				})
				register({
					mobile: this.form.mobile,
					password: this.form.password,
					code: this.form.code,
					area: this.form.area,
					birthday: this.form.birthday,
					nickname: this.form.nickname,
					sex: this.form.sex,
					avatar: this.form.avatar,
					skip:false,
					locale:this.locale,
					source:'APP',
				})
				.then(res => {
					if (res.code === 0) {
						debugger
						this.sending = true;
						this.$refs.uToast.show({
							message: that.pleasesigninText,
							type: 'success'
						})
						uni.hideLoading();
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/common/public/login_one'
							});
						}, 500);
					} else {
						uni.hideLoading();
						uni.showModal({
							showCancel: false,
							title: that.registrationfailedText,
							content: res.msg,
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.goshop-list-item-name{
	display: flex;
	justify-content: center;
	align-items: center;
}
.goshop-list-item-cen{
	display: flex;
	justify-content: center;
	align-items: center;
}
.goshop-input{
	width: 150rpx;
}
.goshop-complete-wrap{
	.goshop-complete-head{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 100rpx;
	}
	.goshop-complete-body{
		
	}
	.goshop-complete-bottom{
		padding: 20rpx;
	}
}
</style>
